<template>
  <!-- 历史持仓 -->
  <div>
    <template v-if="listData.length > 0">
      <div class="border-b-color" v-for="item in listData" :key="item.order_no">
        <div class="flex justify-between pt-30 pb-28">
          <div class="flex items-center">
            <div class="pl-28 pr-28 pt-10 pb-10 text-white rounded-md"
              :class="item.direction=='buy'?' bg-green':'bg-red'">
              {{ item.direction=='buy'?$t('开多'):$t('开空')}}
            </div>
            <div class="ml-22 font-30 font-700 textColor">{{ item.name }} {{ $t('永续') }}</div>
          </div>
         
        </div>
        <div class="flex justify-between pb-28">
          <div class="text-grey">{{ $t('订单号') }}</div>
          <div class="textColor">{{item.order_no}}</div>
        </div>
        <div class="flex justify-between pb-28">
          <div class="text-grey">{{ $t('价格') }}</div>
          <div class="textColor">{{item.trade_avg_price}}</div>
        </div>
        <div class="flex justify-between pb-28">
          <div class="text-grey">{{ $t('成交数量') }}</div>
          <div class="textColor">{{item.volume_open}}</div>
        </div>
        <div class="flex justify-between pb-28">
          <div class="text-grey">{{ $t('手续费') }}</div>
          <div class="textColor">{{item.fee}}</div>
        </div>
        <div class="flex justify-between pb-28">
          <div class="text-grey">{{ $t('实现盈亏') }}</div>
          <div :class="{
                  'text-green':item.profit / 1 > 0,
                  'text-red':item.profit / 1 < 0,
                }">{{item.profit / 1 > 0 ? '+' + item.profit : item.profit}}</div>
        </div>
        <div class="flex justify-between pb-28 items-center">
          <div class="text-grey">{{ $t('操作') }}</div>
          <button class="border-none pl-34   text-blue bg-none colorMain" @click="goDetail(item)">{{ $t('详情') }}</button>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
    name:"perpetualHistoryPosition",
    props: {
        listData: {
            type: Array,
            default() {
                return []
            }
        }
    },
    data() {
        return {
            historyData:[
                { name: "BTC/USDT", direction: "buy", amount: "200", price: "23000",create_time:"2022-07-20 10:05:15"},
            ]
        }
    },
    methods:{
        goDetail(item) {
            this.$router.push({
                path:"/orderDetail?order_no=" + item.order_no
            });
        }
    }

}
</script>
